extends layout
block content
	h2 jade api
	p(style="word-break:break-all").
		1.  &nbsp; jade.compile(source,options)  <br/>
		2.	&nbsp; jade.compleFile(path,options) <br/>
		3.	&nbsp; jade.compleClient(source,options)<br/>
		4.	&nbsp; jade.render(source,options) <br/>
		5.	&nbsp; jade.renderFile(filename,options) <br/>
	h2 导入
	include style
	style.
		h2{
			color:#000
		}
	include title.html
	h2 模板继承

	h2 mixin 复用代码块1
	h3 mixin 
	mixin lesson
		p imooc jade study
	+lesson
	h3 mixin 传参
	mixin study(name,courses)
		p #{name} study
		ul.course
			each course in courses
				li= course
	+study('scott',['jade','node','java'])
	h3 mixin 嵌套
	mixin group(student)
		h4 #{student.name}
		+study(student.name,student.courses)

	- var student = {name: 'dengwobo',courses:['java','node','jade']}

	+group(student)

	h3 mixin 内联代码块
	mixin team(slogon)
		h4 #{slogon}
		if block
			block
		else
			p no name
	+team('slogon')
		p Good job!

	h3 mixin 属性传递
	mixin attr(name)
		p(class != attributes.class) #{name}
	+attr('attr')(class='magic')
	h3 mixin 属性传递 多属性传递
	mixin attrs(name)
		p&attributes(attributes) #{name}
	+attrs('attrs')(class='magic2',id='attrid')

	h3 mixin 多参数传递

	mixin magic(name, ...items)
		ul(class='#{name}')
		each item in items
			li= item

	+magic('magic', 'java', 'node', 'express')



	h2 流程 '-' 可选
	h3 if else
	- var isImooc = true
	- var lessons = ['jade','node','express']
	if lessons
		if lessons.length > 2
			p #{lessons.join(', ')}
		else if lessons.length > 1
			p #{lessons.join(', ')}
		else 
			p no lesson
	else
		p no lesson
	h3 unless 翻转条件 双重否定
	unless !isImooc 
		p #{lessons.length}

	h3 case
	- var name  = 'jade'
	case name
		when 'java' 
			p Hi java!
		when 'node'
			p Hi node!
		when 'jade' : p Hi jade!
		when 'express' : p Hi express!
		default: p Hi #{name}


	h3 for each
	- var imooc = {course: 'jade',level: 'high'}
	- for (var k in imooc) 
		p= imooc[k] 

	h3 each
	- each value, key in imooc
		p #{key}: #{value}
	h3 遍历数组
	- var courses=['node','jade','express']
	each item in courses
		p= item

	h3 嵌套循环
	- var sections = [{id:1,items:['a','b']},{id:2,items:['c','d']}]

	dl
		each section in sections.length>0?sections : [{id:0,items:['none']}]
			dt= section.id
			each item in section.items
				dd= item

	h3 while
	- var n = 0
	ul
		while n < 4
			li= n++
	

	style.
		body {color: #ff6600}

	script(type='text/javascript').
		var imoocCourse='jade';	
	

	- var data = 'text'
	- var htmlData='<script> alert(1); </script> <span>script</span>'
	h2 转义 安全转义 和非安全转义
	

	p #{data}
	p #{htmlData}
	p= data
	p= htmlData
	// p !{htmlData}
	// p!= htmlData
	p \#{htmlData}
	p \!{htmlData}

	input(value = '#{newData}')
	input(value = newData)

	h2 声明变量和替换数据
	- var course = 'jade'
	div
		a #{course.toUpperCase()}

		h2 文档声明和头尾标签
		h2 标签语法
		section
			div
				ul
				p
		h2 元素属性
		div(id = 'id', class ='class1 class2')
		div#id.class1.class2
			a(href = 'http://imooc.com' target='_blank')

		h2 元素文本
		p
			| 1. aa 
			<strong>11</strong>
			| 2. bb 
			<span>22</span>
			| 3. cc 
			| 4. dd

		p.
			 1. aa <strong>11</strong>
			 2. bb <span>22</span>
			 3. cc 
			 4. dd
		h2 注释
		h3 单行注释

		//h1 imooc jade study
		h3 非缓冲注释
		//- #id.classname

		a(href='http://imooc.com',title='imooc jade study',data-uid='1000') link

		input(name='course',type='text',value='jade')
		input(name='type',type='checkbok',checked)

		h4 块注释
	//-
		p.
			 1. aa <strong>11</strong>
			 2. bb <span>22</span>
			 3. cc 
			 4. dd
	-//
		p
			| 1. aa 
			<strong>11</strong>
			| 2. bb 
			<span>22</span>
			| 3. cc 
			| 4. dd


